---
title: Pages
description: Une introduction aux pages Astro.
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro';
import Since from '~/components/Since.astro'

Les **pages** sont des fichiers qui se trouvent dans le sous-répertoire `src/pages/` de votre projet Astro. Ils sont responsables de la gestion du routage, du chargement des données et de la mise en page globale de chaque page de votre site web.

## Fichiers de page pris en charge 

Astro prend en charge les types de fichiers suivants dans le répertoire `src/pages/` :

- [`.astro`](#pages-astro)
- [`.md`](#pages-markdownmdx)
- `.mdx` (avec l'[intégration MDX installée](/fr/guides/integrations-guide/mdx/#installation))
- [`.html`](#pages-html)
- `.js`/`.ts` (comme [points de terminaison](/fr/guides/endpoints/))

## Routage basé sur les fichiers

Astro utilise une stratégie de routage appelée **routage basé sur les fichiers**. Chaque fichier de votre répertoire `src/pages/` devient un point d'accès sur votre site en fonction de son chemin d'accès.

Un seul fichier peut également générer plusieurs pages en utilisant le [routage dynamique](/fr/guides/routing/#routes-dynamiques). Cela vous permet de créer des pages même si votre contenu se trouve en dehors du répertoire spécial `/pages/`, par exemple dans une [collection de contenu](/fr/guides/content-collections/) ou un [CMS](/fr/guides/cms/).

<ReadMore>En savoir plus sur [le routage dans Astro](/fr/guides/routing/).</ReadMore>

### Lien entre les pages

Écrivez des éléments HTML standard [`<a>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/a) dans vos pages Astro pour créer des liens vers d'autres pages de votre site. Utilisez un **chemin d'URL relatif à la racine de votre domaine** comme lien, et non un fichier de chemin relatif.

Par exemple, pour créer un lien `https://example.com/authors/sonali/` depuis n'importe quelle autre page de `example.com` :

```astro title="src/pages/index.astro"
En savoir plus <a href="/authors/sonali/">à propos de Sonali</a>.
```

## Pages Astro

Les pages Astro utilisent l'extension de fichier `.astro` et prennent en charge les mêmes fonctionnalités que les [composants Astro](/fr/basics/astro-components/).

```astro title="src/pages/index.astro"
---
---
<html lang="fr">
  <head>
    <title>Ma page d'accueil</title>
  </head>
  <body>
    <h1>Bienvenue sur mon site web !</h1>
  </body>
</html>
```

Une page doit produire un document HTML complet. S'il n'est pas explicitement inclus, Astro ajoutera la déclaration `<!DOCTYPE html>` et le contenu `<head>` nécessaires à tout composant `.astro` situé dans `src/pages/` par défaut. Vous pouvez renoncer à ce comportement pour chaque composant en le marquant comme une page [partielle](#pages-partielles).

Pour éviter de répéter les mêmes éléments HTML sur chaque page, vous pouvez déplacer les éléments communs `<head>` et `<body>` dans vos propres [composants de mise en page](/fr/basics/layouts/). Vous pouvez utiliser autant, ou aussi peu de composants de mise en page que vous le souhaitez.

```astro title="src/pages/index.astro" /</?MySiteLayout>/ {2}
---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>Le contenu de ma page, enveloppé dans une mise en page !</p>
</MySiteLayout>
```

<ReadMore>En savoir plus sur les [composants de mise en page](/fr/basics/layouts/) dans Astro.</ReadMore>

## Pages Markdown/MDX

Astro traite également tous les fichiers Markdown (`.md`) contenus dans `src/pages/` comme des pages de votre site web final. Si vous avez [installé l'intégration MDX](/fr/guides/integrations-guide/mdx/#installation), les fichiers MDX (`.mdx`) sont traités de la même manière.

:::tip
Envisagez de créer des [collections de contenu](/fr/guides/content-collections/) au lieu de pages pour les répertoires de fichiers Markdown connexes qui partagent une structure similaire, tels que les articles de blog ou les pages de produits.
:::

Les fichiers Markdown peuvent utiliser la propriété spéciale `layout` du frontmatter pour spécifier un [composant de mise en page](/fr/basics/layouts/) qui enveloppera leur contenu Markdown dans un document de page `<html>...</html>` complet.

```md {3}
---
# Exemple : src/pages/page.md
layout: ../layouts/MySiteLayout.astro
title: Ma page Markdown
---
# Titre

Voici ma page, écrite en **Markdown**.
```

<ReadMore>En savoir plus sur l'utilisation de [Markdown](/fr/guides/markdown-content/) dans Astro.</ReadMore>

## Pages HTML

Les fichiers portant l'extension `.html` peuvent être placés dans le répertoire `src/pages/` et utilisés directement comme pages sur votre site. Notez que certaines fonctionnalités clés d'Astro ne sont pas prises en charge dans les [composants HTML](/fr/basics/astro-components/#composants-html).

## Page d'erreur 404 personnalisée

Pour une page d'erreur 404 personnalisée, vous pouvez créer un fichier `404.astro` ou `404.md` dans `src/pages`.

Ce dernier servira à générer une page `404.html`. La plupart des [services de déploiement](/fr/guides/deploy/) le trouveront et l'utiliseront.

## Page d'erreur 500 personnalisée

Pour afficher une page d'erreur 500 personnalisée pour les pages qui sont [rendues à la demande](/fr/guides/on-demand-rendering/), créez le fichier `src/pages/500.astro`. Cette page personnalisée n'est pas disponible pour les pages pré-rendues.

Si une erreur survient lors du rendu de cette page, la page d'erreur 500 par défaut de votre hébergeur sera affichée à votre visiteur.

<p><Since v="4.10.3" /></p>

Pendant le développement, si vous avez un fichier `500.astro`, l'erreur générée lors de l'exécution est affichée dans votre terminal, au lieu d'être présentée dans la fenêtre d'erreur superposée.

### `error`

<p><Since v="4.11.0" /></p>

`src/pages/500.astro` est une page spéciale à laquelle on passe automatiquement une propriété `error` pour toute erreur survenant lors du rendu. Cela vous permet d'utiliser les détails d'une erreur (par exemple, d'une page, d'un middleware, etc.) pour afficher des informations à votre visiteur.

Le type de données de la propriété `error` peut être quelconque, ce qui peut affecter la façon dont vous définissez le type ou utilisez la valeur dans votre code :

```astro title="src/pages/500.astro"
---
interface Props {
  error: unknown;
}

const { error } = Astro.props;
---
<div>{error instanceof Error ? error.message : "Erreur inconnue"}</div>
```

Pour éviter la fuite d'informations sensibles lors de l'affichage du contenu de la propriété `error`, envisagez d'évaluer d'abord l'erreur, et de renvoyer le contenu approprié en fonction de l'erreur provoquée. Par exemple, vous devriez éviter d'afficher la pile de l'erreur, car elle contient des informations sur la façon dont votre code est structuré sur le serveur.

## Pages partielles

<p><Since v="3.4.0" /></p>

:::caution
Les pages partielles sont destinées à être utilisées en conjonction avec une bibliothèque front-end, telle que [htmx](https://htmx.org/) ou [Unpoly](https://unpoly.com/). Vous pouvez également les utiliser si vous êtes à l'aise avec l'écriture d'un JavaScript front-end de bas niveau. C'est pourquoi il s'agit d'une fonctionnalité avancée.

En outre, les pages partielles ne doivent pas être utilisées si le composant contient des styles ou des scripts, car ces éléments seront supprimés de la sortie HTML. Si vous avez besoin de styles à portée limitée, il est préférable d'utiliser des pages régulières, non partielles, ainsi qu'une bibliothèque front-end qui sait comment fusionner le contenu dans l'en-tête.
:::

Les pages partielles sont des composants de page situés dans `src/pages/` qui ne sont pas destinés à être affichés comme des pages complètes.

Comme les composants situés en dehors de ce dossier, ces fichiers n'incluent pas automatiquement la déclaration `<!DOCTYPE html>`, ni aucun contenu `<head>` tel que les styles à portée limitée et les scripts.

Cependant, parce qu'ils sont situés dans le répertoire spécial `src/pages/`, le HTML généré est disponible à une URL correspondant à son chemin de fichier. Cela permet à une bibliothèque de rendu (par exemple [htmx](https://htmx.org/), [Stimulus](https://stimulus.hotwired.dev/), [jQuery](https://jquery.com/)) d'y accéder sur le client et de charger des sections de HTML dynamiquement sur une page sans rafraîchissement du navigateur ni navigation dans la page.

Les pages partielles, lorsqu'elles sont associées à une bibliothèque de rendu, constituent une alternative aux [îlots d'Astro](/fr/concepts/islands/) et aux [balises `<script>`](/fr/guides/client-side-scripts/) pour la création de contenu dynamique dans Astro.

Les fichiers de pages qui peuvent exporter une valeur pour [`partial`](/fr/reference/routing-reference/#partial) (par exemple `.astro` et `.mdx`, mais pas `.md`) peuvent être marqués comme étant partiels.

```astro title="src/pages/partial.astro" ins={2}
---
export const partial = true;
---
<li>Je suis une page partielle !</li>
```

### Utilisation avec une bibliothèque

Les pages partielles sont utilisées pour mettre à jour dynamiquement une section d'une page en utilisant une bibliothèque telle que [htmx](https://htmx.org/).

L'exemple suivant montre un attribut `hx-post` défini sur l'URL d'une page partielle. Le contenu de la page partielle sera utilisé pour mettre à jour l'élément HTML ciblé sur cette page. 

```astro title="src/pages/index.astro" 'hx-post="/partials/clicked/"'
<html>
  <head>
    <title>Ma page</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
  <body>
    <section>
      <div id="parent-div">Cible ici</div>

      <button hx-post="/partials/clicked/"
        hx-trigger="click"
        hx-target="#parent-div"
        hx-swap="innerHTML"
      >
          Cliquez-moi !
      </button>
    </section>
  </body>
</html>
```

Le fichier partiel `.astro` doit exister dans le chemin d'accès correspondant et inclure une exportation définissant la page comme étant partielle :

```astro title="src/pages/partials/clicked.astro" {2}
---
export const partial = true;
---
<div>J'ai été cliqué !</div>
```

Voir la [documentation htmx](https://htmx.org/docs/) pour plus de détails sur l'utilisation de htmx.
